<template>
	<div>
		<Row>
			<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
				<Input class="w-100" v-model="searchKey.name" placeholder="请输入商品名" />
			</Col>
			<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
				<Select v-model="searchKey.statu" placeholder="请选择状态" clearable>
					<Option value="1">上架</Option>
					<Option value="0">下架</Option>
				</Select>
			</Col>
		</Row>
		<Row>
			<div class="w-100 d-flex justify-content-between align-items-center">
				<Button class="m-1" type="error" shape="circle" @click="newProduct" icon="md-add">新增</Button>
				<Button class="m-1" type="primary" shape="circle" @click="searchs" icon="ios-search">查询</Button>
			</div>
		</Row>
		<div class="mt-1">
			<Table border :class="'m-1'" :columns="tableInfo.columnInfo" :data="tableInfo.data">
				<template slot-scope="{ row }" slot="statu">
					<Tag :color="row.statu ? 'success' : 'error'">{{ row.statu ? '上架' : '下架' }}</Tag>
				</template>
				<template slot-scope="{ row }" slot="action">
					<Button type="primary" size="small" class="mr-2" @click="showDetail(row.productid)">详情</Button>
					<Button type="error" size="small" @click="remove(row.productid)">删除</Button>
				</template>
			</Table>
		</div>
		<div>
			<Page class="text-right mt-3" :current="tableInfo.currentPage" :page-size="tableInfo.pageSize"
				@on-change="pageSearch" :total="tableInfo.total" show-total />
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				searchKey: {
					name: '',
					statu: '',
					
				},
				tableInfo: {
					currentPage: 1,
					pageSize: 10,
					total: 0,
					columnInfo: [
						{
							title:'商品ID',
							key: 'productid',
							
						},
						{
							title: '商品名称',
							key: 'name'
						},
						{
							title: '价格',
							key: 'price',
							render: (h, params) => h('span', `{params.row.price}`)
						},
						{
							title: '状态',
							slot: 'statu',
							
						},
						{
							title: '所属门店',
							key: 'storeName'
						},
						{
							title: '操作',
							slot: 'action',
							width: 220
						}
					],
					data: []
				}
			}
		},
		props: {
			params: {
				type: Object,
				default: undefined,
			}
		},
		methods: {
			init() {
				this.search()
			},
			newProduct() {
				this.$router.detail.open({
					name: 'sp_new'
				})
			},
			showDetail(productid) {
				this.$router.detail.open({
					name: 'sp_detail',
					query: {
						id: productid
					}
				})
			},
			searchs() {
				this.tableInfo.currentPage = 1
				this.search()
			},
			async search() {
				const params = {
					...this.searchKey,
					current: this.tableInfo.currentPage,
					size: this.tableInfo.pageSize
				}
				console.log("11111111")
				const res = await this.$http.get('/product/page', {
					params
				}).then(data => {
					console.log("11111111")
					console.log(res.data)
					
					this.tableInfo.data = res.data.records
					this.tableInfo.total = res.data.total
				})
				console.log("11111111")
			},
			pageSearch(page) {
				this.tableInfo.currentPage = page
				this.search()
			},
			async remove(productid) {
				await this.$confirm('确定删除该商品吗？', '提示')
				await this.$http.delete(`/admin/product/${productid}`)
				this.$Message.success('删除成功')
				this.search()
			}
		},
		created() {
			this.init()
		}
	}
</script>

<style>
	
</style>